document.addEventListener('DOMContentLoaded', function () {
    // 配置项
    const jsonFilePath = 'data/jx_data.json';
    const updateInterval = 2000; // 每 2 秒更新一次图表2

    // 图表1的初始选项
    const option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        grid: {
            left: "5px",
            top: "10px",
            right: "0%",
            bottom: "10px",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                color: '#fff'
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
        },
        series: [{
            name: 'quality',
            type: 'bar',
            data: [],
            barWidth: '60%',
            color: '#247ce2'
        }]
    };

    // 图表2的初始选项
    const option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: params => {
                const name = params[0].name;
                const seriesData = params.map(param => `${param.seriesName}: ${param.value.toFixed(4)}`).join('<br>');
                return `${name}<br>${seriesData}`;
            }
        },
        legend: {
            data: ['b', 'l', 'h'],
            textStyle: {
                color: '#ffffff',
                fontSize: "12"
            }
        },
        grid: {
            left: "5px",
            top: "13%",
            right: "0%",
            bottom: "10px",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                color: '#fff'
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff'
            },
        },
        series: [
            { name: 'b', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#247ce2' } },
            { name: 'l', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#76ef3e' } },
            { name: 'h', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#eaaf31' } }
        ],
        barWidth: '60%',
    };

    // 读取 JSON 文件
    fetch(jsonFilePath)
        .then(response => response.json())
        .then(data => {
            // 获取 2024 319 下的所有类型（A, B, C...）
            const types = Object.keys(data['2024 319']);

            // 初始化 ECharts 实例
            const chart1 = echarts.init(document.getElementById('chartj-1'));
            const chart2 = echarts.init(document.getElementById('chartj-2'));

            // 计算并更新图表1数据
            function updateChart1() {
                const qualitySum = {};
                types.forEach(type => {
                    data['2024 319'][type].forEach(record => {
                        qualitySum[record.staName] = (qualitySum[record.staName] || 0) + record.quality;
                    });
                });

                const staNames = Object.keys(qualitySum);
                const qualityData = staNames.map(staName => qualitySum[staName]);

                option1.xAxis.data = staNames;
                option1.series[0].data = qualityData;
                chart1.setOption(option1);
            }

            // 更新图表2数据
            function updateChart2(type) {
                const records = data['2024 319'][type];
                const staNames = records.map(record => record.staName);
                const bData = records.map(record => parseFloat(record.SDhAccChange.b.toFixed(4)));
                const lData = records.map(record => parseFloat(record.SDhAccChange.l.toFixed(4)));
                const hData = records.map(record => parseFloat(record.SDhAccChange.h.toFixed(4)));

                option2.xAxis.data = staNames;
                option2.series[0].data = bData;
                option2.series[1].data = lData;
                option2.series[2].data = hData;
                chart2.setOption(option2);
            }

            // 一次性计算并展示图表1数据
            updateChart1();

            // 动态展示图表2数据
            let currentIndex = 0;
            const intervalId = setInterval(() => {
                updateChart2(types[currentIndex]);
                currentIndex = (currentIndex + 1) % types.length; // 循环展示
            }, updateInterval); // 每 2 秒更新一次图表

            // 初始展示第一个类型的数据
            updateChart2(types[0]);
        })
        .catch(error => console.error('Error loading the JSON file:', error));
});
